<template>
  <section class="content" id="content">
    <lq-form :form="form" :rules="rules" ref="LqFormRef">
      <template #footer>
        <div style="padding-bottom: 10px;"  v-if="formOperate==='add'">
          <el-button type="warning"   @click="doSubmitAndExit">保存后退出</el-button>
          <el-button type="primary"   @click="doSubmitAndNext">保存后继续</el-button>
        </div>
        <div style="padding-bottom: 10px;"  v-if="formOperate==='edit'" >
          <el-button type="warning"   @click="doUpdateAndExit">更新</el-button>

        </div>
      </template>
    </lq-form>
  </section>
</template>
<script setup lang="ts">
import LqForm from "@/components/common/LqForm.vue";
import  CommonConst from  '@/config/const'
import $Api from '@/request/api'
import {
  ref,
  reactive,
  onMounted,
  toValue,
  getCurrentInstance
} from "vue";
import {ElMessage, FormInstance, FormRules} from "element-plus";

/**
 * 用来记录表单操作状态 add view  edit
 */
const  formOperate=ref("add")

// 表单数据结构
const form = ref({
  innerAttrs: {
    labelPosition: 'right',
    labelWidth: 140,
    disabled: false,
    readonly:false,

  },
  model: {
    id:'',
    name: '',
    nation: '',
    idCard: '',
    telephone: '',
    age: '',
    gender: '',
    region: '',
    educationLevel: '',
    maritalStatus: '',
    bloodType: '',
    remark:''

  },
  formItems: [
    {type: 'input', label: '居民姓名: ', prop: 'name', span: 10, maxlength: 30, placeholder: '请输入居民姓名'},
    {type: 'select', label: '民族: ', prop: 'nation', span: 10, options: CommonConst.nationTypeList },
    {type: 'input', label: '居民身份证: ', prop: 'idCard', rows: 3, span: 20, placeholder: '请输入居民身份证号', },
    {type: 'input', label: '手机号码: ', prop: 'telephone', rows: 3, span: 20, placeholder: '请输入联系电话', },
    {type: 'number', label: '年龄: ', prop: 'age', span: 10, maxlength: 30, placeholder: '年龄应该是数字'},
    {type: 'select', label: '性别: ', prop: 'gender', span: 10, options:CommonConst.genderTypeList, },
    {type: 'select', label: '所在地区: ', prop: 'region', rows: 3, span: 10, options:CommonConst.regionTypeList, },
    {type: 'select', label: '文化程度: ', prop: 'educationLevel', rows: 3, span: 10,  options:CommonConst.educationLevelTypeList },
    {type: 'select', label: '婚姻状况: ', prop: 'maritalStatus', rows: 3, span: 10,options:CommonConst.maritalStatusTypeList },
    {type: 'select', label: '血型: ', prop: 'bloodType', rows: 3, span: 10, options:CommonConst.bloodTypeList},
    {type: 'textarea', label: '备注: ', prop: 'remark', rows: 3, span: 20, placeholder: '', }
  ],
  buttonsAttrs: {
    // align: 'center'
  }
});

// 表单验证规则
const rules = reactive<FormRules>({
  name: [{ required: true, message: '请输入名称', trigger: 'blur'}],
  nation: [{ required: true, message: '请选择民族', trigger: 'change'}],
  idCard: [{ required: true, message: '请输入身份证号', trigger: 'blur'}, { min: 18, max: 18, message: '身份证18位', trigger: 'blur' },],
  telephone: [{ required: true, message: '请输入电话', trigger: 'blur'}],
  region: [{ required: true, message: '请选择城市', trigger: 'change'}],
  age:[{ required: true, message: '请输入年龄', trigger: 'blur'}],
  gender:[{ required: true, message: '请选择性别', trigger: 'blur'}]

});


//向上注册刷新事件
const emit = defineEmits<{
  (e: 'flush', value: Object): void
  (e: 'close', value: Object): void
  (e: 'flushAndClose', value: Object): void
}>()

// 表单验证规则
const LqFormRef = ref<FormInstance>();


const  doSubmitAndExit= async ()=>{
  const valid = await LqFormRef.value?.validateForm();
  if (valid) {
    await doSubmit();
    emit("flushAndClose","无")

  }



  //退出
 //

}
const  doSubmitAndNext= async ()=>{

  const valid = await LqFormRef.value?.validateForm();
  if (valid) {
    await doSubmit();
    doReset();
  }


}

const doSubmit = async () => {
  $Api.residentInfo.addResidentInfo(form.value.model).then(()=>{
    ElMessage.success('操作成功')
  })
}


/**
 * 编辑或只读查看
 * @param id
 * @param readyOnly
 */
const doViewOrEdit = (id:string,operate:string) => {

  $Api.residentInfo.queryResidentInfoById(id).then((data)=>{
    form.value.model=data;
    formOperate.value=operate;
    ElMessage.success('可以进行编辑了')
  })

}

const doUpdateAndExit =()=>{
  $Api.residentInfo.updateResidentInfo(form.value.model).then((data)=>{
    ElMessage.success('更新成功')
    //省略退出窗口
  })
}


const doReset = () => {
  LqFormRef.value?.resetFields();
  form.value.innerAttrs.readonly=false;
  form.value.model.id='';  //必须置空否则变成修改了
  formOperate.value='add';

}




//暴漏组件操作接口
defineExpose({
  doViewOrEdit,
  doReset  //重置
})

</script>